<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="searchForm"
				:inline="true"
				:model="queryData"
				class="flex-warp-container"
			>
				<el-form-item
					:label="`${$t('common.belong_merchant')}:`"
					prop="merchantClientId"
				>
					<merchant-select
						v-model="queryData.merchantClientId"
						:placeholder="$t('common.select_all')"
					></merchant-select>
				</el-form-item>
				<el-form-item
					:label="$t('operation.client_start.start_name') + ':'"
					prop="pageName"
					class="flex-row-container"
					label-width="91px"
				>
					<el-input
						v-model="queryData.pageName"
						size="medium"
						:placeholder="$t('common.please_enter')"
						clearable
						v-input="{ name: 'symbols' }"
						style="width: 260px"
						maxlength="20"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="$t('common.status') + ':'"
					prop="pageStatus"
					class="flex-row-container"
					label-width="55px"
				>
					<el-select
						v-model="queryData.pageStatus"
						size="medium"
						:placeholder="$t('common.select_all')"
						clearable
						style="width: 220px"
					>
						<el-option
							key="1"
							:value="1"
							:label="$t('common.status_turn_on')"
						></el-option>
						<el-option
							key="0"
							:value="0"
							:label="$t('common.status_disabled')"
						></el-option>
						<!-- <el-option
								v-for="item in statusArr"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option> -->
					</el-select>
				</el-form-item>
				<div style="display: inline-block;">
					<el-select
						v-model="searchAdminType"
						style="width: 130px;margin-right:-5px;margin-top:2px"
						:placeholder="$t('common.select_all')"
						:popper-append-to-body="false"
						@change="
							queryData.createdBy = ''
							queryData.updatedBy = ''
						"
					>
						<el-option
							:key="0"
							:label="$t('common.createBy')"
							:value="0"
						></el-option>
						<el-option
							:key="1"
							:label="$t('common.last_updateBy')"
							:value="1"
						></el-option>
					</el-select>
					<el-form-item v-if="!searchAdminType" prop="createdBy">
						<el-input
							v-model="queryData.createdBy"
							clearable
							:maxlength="20"
							size="medium"
							v-input="{ name: 'symbols' }"
							style="width: 200px"
							:placeholder="$t('common.please_enter')"
							@keyup.enter.native="enterSearch"
						></el-input>
					</el-form-item>
					<el-form-item v-if="searchAdminType" prop="updatedBy">
						<el-input
							v-model="queryData.updatedBy"
							clearable
							:maxlength="20"
							size="medium"
							v-input="{ name: 'symbols' }"
							style="width: 200px"
							:placeholder="$t('common.please_enter')"
							@keyup.enter.native="enterSearch"
						></el-input>
					</el-form-item>
				</div>
				<el-form-item
					:label="$t('operation.client_banner.whether_jump') + ':'"
					class="tagheight flex-row-container"
					label-width="77px"
					prop="isLink"
				>
					<el-select
						v-model="queryData.isLink"
						style="width: 210px"
						clearable
						:placeholder="$t('common.select_all')"
						:popper-append-to-body="false"
					>
						<el-option
							key="1"
							value="1"
							:label="$t('common.yes')"
						/>
						<el-option key="0" value="0" :label="$t('common.no')" />
					</el-select>
				</el-form-item>
				<el-form-item
					:label="$t('operation.client_banner.jump_target') + ':'"
					class="tagheight flex-row-container"
					label-width="77px"
					prop="linkTarget"
				>
					<el-select
						v-model="queryData.linkTarget"
						clearable
						style="width: 210px"
						:placeholder="$t('common.select_all')"
						:popper-append-to-body="false"
					>
						<el-option
							v-for="item in linkTargetArr"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item style="margin-left: 8px">
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('501031')"
						type="warning"
						icon="el-icon-folder"
						:disabled="loading"
						size="medium"
						@click="addLabel"
					>
						{{ $t('common.add') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				size="mini"
				class="small-size-table"
				:data="tableData"
				style="width: 100%"
				highlight-current-row
				:header-cell-style="getRowClass"
				:max-height="tableHeight"
			>
				<el-table-column
					prop="pageName"
					align="center"
					:label="$t('operation.client_start.start_name')"
					width="160"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>{{ scope.row.pageName || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="remark"
					align="center"
					:label="$t('common.remark')"
					width="160"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>{{ scope.row.remark || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="pageStatus"
					align="center"
					:label="$t('common.status')"
					width="110"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span
							v-if="scope.row.pageStatus + '' === '0'"
							class="disableRgba"
						>
							{{ $t('common.status_disabled') }}
							<!-- {{ typeFilter(scope.row.pageStatus, 'operateStatus') }} -->
						</span>
						<span
							v-else-if="!!scope.row.pageStatus"
							class="normalRgba"
						>
							<!-- {{ typeFilter(scope.row.pageStatus, 'operateStatus') }} -->
							{{ $t('common.status_turn_on') }}
						</span>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="pictureUrl"
					align="center"
					:label="$t('common.image')"
				>
					<template slot-scope="scope">
						<div
							v-if="!!scope.row.pictureUrl"
							class="blueColor decoration"
							@click="
								rowData = scope.row
								imageViewerVisible = true
							"
						>
							{{ $t('common.click_show') }}
						</div>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="isLink"
					align="center"
					:label="$t('operation.client_banner.whether_jump')"
					width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							scope.row.isLink === 1
								? $t('common.yes')
								: scope.row.isLink === 0
								? $t('common.no')
								: '-'
						}}
					</template>
				</el-table-column>
				<el-table-column
					prop="linkTarget"
					align="center"
					:label="$t('operation.client_banner.jump_target')"
					width="150"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<div v-if="scope.row.isLink === 0">
							-
						</div>
						<div v-else>
							<!-- <div v-if="scope.row.linkTarget === 0">
									{{ filterGameName(scope.row.gameId) }}
								</div> -->
							<div
								v-if="
									scope.row.linkTarget === 1 ||
										scope.row.linkTarget === 2
								"
							>
								{{ typelinkTarget(scope.row.linkTarget) }}
							</div>
							<div v-else>-</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column
					prop="createdBy"
					align="center"
					:label="$t('common.createBy')"
					width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>{{ scope.row.createdBy || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="createdAt"
					align="center"
					:label="$t('common.createAt')"
					width="180"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>{{ scope.row.createdAt || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="updatedBy"
					align="center"
					:label="$t('common.last_updateBy')"
					width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>{{ scope.row.updatedBy || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="updatedAt"
					align="center"
					:label="$t('common.last_updateAt')"
					width="180"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>{{ scope.row.updatedAt || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="pageStatus"
					align="center"
					:label="$t('common.actions')"
					width="300"
				>
					<template slot-scope="scope">
						<el-button
							v-if="
								scope.row.pageStatus && hasPermission('501032')
							"
							type="danger"
							size="medium"
							@click="recycle(scope.row)"
						>
							{{ $t('common.disabled') }}
						</el-button>
						<el-button
							v-if="
								!scope.row.pageStatus && hasPermission('501032')
							"
							type="success"
							size="medium"
							@click="recycle(scope.row)"
						>
							{{ $t('common.start_up') }}
						</el-button>
						<el-button
							v-if="hasPermission('501033')"
							type="primary"
							icon="el-icon-edit"
							:disabled="scope.row.pageStatus === 1"
							size="medium"
							@click="edit(scope.row)"
						>
							{{ $t('common.edit') }}
						</el-button>
						<el-button
							v-if="hasPermission('501034')"
							type="danger"
							icon="el-icon-delete"
							size="medium"
							:disabled="scope.row.pageStatus === 1"
							@click="deleteLabel(scope.row)"
						>
							{{ $t('common.delete') }}
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				:total="total"
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
		<el-dialog
			:title="title"
			:visible.sync="dialogFormVisible"
			:destroy-on-close="true"
			:width="getWidth('520px')"
			class="rempadding"
			@close="clear"
		>
			<el-divider></el-divider>
			<el-form
				ref="formSub"
				:model="dialogForm"
				label-width="auto"
				:rules="rules"
			>
				<el-form-item
					:label="$t('common.choose_merchant') + ':'"
					prop="merchantClientId"
				>
					<merchant-select
						v-model="dialogForm.merchantClientId"
						:disabled="!!rowData"
						style="width: 330px"
						:placeholder="$t('common.components.select_merchant')"
					></merchant-select>
				</el-form-item>
				<el-form-item
					:label="$t('operation.client_start.start_name') + ':'"
					prop="pageName"
				>
					<el-input
						v-model="dialogForm.pageName"
						:maxlength="20"
						autocomplete="off"
						style="width: 330px"
						v-input="{ name: 'symbols' }"
						:placeholder="$t('common.please_enter')"
						clearable
					></el-input>
				</el-form-item>
				<el-form-item
					:label="$t('operation.client_banner.whether_jump') + ':'"
					prop="isLink"
					style="width: 330px"
					:rules="[
						{
							required: true,
							message: $t('common.please_choose'),
							trigger: 'change'
						}
					]"
				>
					<el-select
						v-model="dialogForm.isLink"
						class="region"
						style="width: 330px"
						:placeholder="$t('common.please_choose')"
					>
						<el-option
							:label="$t('operation.client_banner.jump')"
							:value="1"
						></el-option>
						<el-option
							:label="$t('operation.client_banner.no_jump')"
							:value="0"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					v-if="dialogForm.isLink === 1"
					key="linkTarget"
					:label="$t('operation.client_banner.jump_target') + ':'"
					prop="linkTarget"
					style="width: 330px"
					:rules="[
						{
							required: true,
							message:
								$t('common.please_enter') +
								$t('operation.client_banner.jump_target'),
							trigger: 'change'
						}
					]"
				>
					<el-select
						v-model="dialogForm.linkTarget"
						class="region"
						@change="changeSelect($event)"
						style="width: 330px"
					>
						<el-option
							v-for="item in linkTargetArr"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					v-if="
						dialogForm.isLink &&
							(dialogForm.linkTarget === 1 ||
								dialogForm.linkTarget === 2)
					"
					prop="targetUrl"
					:label="$t('operation.client_banner.link') + ':'"
					style="width: 330px"
					:rules="[
						{
							required: true,
							message:
								$t('common.please_choose') +
								$t('operation.client_banner.link'),
							trigger: 'blur'
						}
					]"
				>
					<el-input
						v-model="dialogForm.targetUrl"
						class="region"
						:placeholder="$t('common.please_enter')"
						style="width: 330px"
						show-word-limit
					></el-input>
				</el-form-item>
				<el-form-item
					:label="$t('operation.client_start.start_img_upload') + ':'"
					prop="pictureUrl"
				>
					<UploadItem
						ref="imgUpload"
						:upload-file-type="'image'"
						:imgUrl="dialogForm.pictureUrl || ''"
						:platform="'App'"
						:uploadAPI="uploadAPI"
						:bounds="imageSize"
						@upoladItemSucess="handleUploadSucess"
						@startUpoladItem="handleStartUpload"
						@deleteUpoladItem="handleDeleteUpload"
						@upoladItemDefeat="handleUploadDefeat"
					></UploadItem>
					<div class="remakeBox">
						<span class="danger">*</span>
						{{ $t('operation.upload_tips1') }}png，jpg
						{{ $t('operation.upload_tips2') }}{{ imageSize.width }}*
						{{ imageSize.height }}
						{{ $t('operation.upload_tips3') }}5M
					</div>
				</el-form-item>
				<el-form-item :label="$t('common.remark') + ':'" prop="remark">
					<el-input
						v-model="dialogForm.remark"
						type="textarea"
						style="width: 330px"
						:maxlength="500"
						show-word-limit
						v-input="{ name: 'noEmpty' }"
					></el-input>
				</el-form-item>
			</el-form>
			<el-divider></el-divider>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="subAddOrEdit">
					{{ $t('common.save') }}
				</el-button>
			</div>
		</el-dialog>
		<image-viewer
			v-if="rowData"
			:visible.sync="imageViewerVisible"
			:url-list="[rowData.pictureUrl]"
		/>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import { mapGetters } from 'vuex'
// import UploadItem from './components/uploadItem'
// import { isHaveEmoji, notSpecial2 } from '@/utils/validate'
import {
	homeVenueList,
	startPageAdd,
	startPageEdit,
	startPageUpdataStatus
} from '@/api/operation'
import MainContent from '@/components/MainContent/index.vue'

export default {
	name: routerNames.clientStart,
	components: {
		UploadItem: () => import('@/components/UploadItem'),
		MainContent
	},
	mixins: [list],
	data() {
		this.deleteLabel = this.throttle(this.deleteLabel, 1000)
		this.subAddOrEdit = this.throttle(this.subAddOrEdit, 1000)
		this.recycle = this.throttle(this.recycle, 1000)
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			rowData: {},
			searchAdminType: 0,
			queryData: {
				pageName: undefined,
				pageStatus: undefined,
				createdBy: undefined,
				updatedBy: undefined,
				configType: 0,
				merchantClientId: '',
				isLink: undefined,
				linkTarget: undefined
			},
			pageNum: 1,
			pageSize: 100,
			tableData: [],
			dialogFormVisible: false,
			dialogForm: {
				pageName: undefined,
				pictureUrl: null,
				remark: undefined,
				configType: 0,
				merchantClientId: '',
				isLink: undefined,
				linkTarget: undefined,
				targetUrl: undefined
			},
			total: 0,
			title: '',
			pictureUrl: null,
			imageViewerVisible: false
		}
	},
	computed: {
		...mapGetters(['merchantInfo']),
		getMerchantInfo() {
			return this.merchantInfo
		},
		preLoadArr() {
			return this.globalDics.operateYesNo || []
		},
		statusArr() {
			return this.globalDics.operateStatus || []
		},
		rules() {
			const pageName = [
				{
					required: true,
					message: this.$t('operation.client_start.input_tips1'),
					trigger: 'blur'
				}
			]
			const merchantClientId = [
				{
					required: true,
					message: this.$t('operation.please_choose_merchant'),
					trigger: 'change'
				}
			]
			const pictureUrl = [
				{
					required: true,
					message: this.$t('common.please_upload_img'),
					trigger: 'change'
				}
			]
			const remark = [
				{
					required: true,
					message: this.$t('operation.client_start.input_tips4'),
					trigger: 'blur'
				},
				{
					min: 2,
					max: 500,
					message: this.$t('operation.client_start.input_tips4'),
					trigger: 'blur'
				}
			]
			return {
				pageName,
				pictureUrl,
				remark,
				merchantClientId
			}
		},
		linkTargetArr() {
			return [
				{
					code: 1,
					description: this.$t('operation.client_banner.address')
				},
				{
					code: 2,
					description: this.$t('operation.client_banner.out_address')
				}
			]
		},
		imageSize() {
			return {
				width: 1624,
				height: 750
			}
		},
		fileSize() {
			return 5 * 1024 * 1024
		},
		uploadAPI() {
			return this.$api.imageUploadAPI
		}
	},
	watch: {
		'dialogForm.isLink': {
			handler(newVal) {
				if (newVal === 0) {
					this.dialogForm.linkTarget = undefined
					this.dialogForm.targetUrl = undefined
				}
			}
		}
	},
	mounted() {
		if (!this.$store.getters.isZk) {
			this.queryData.merchantClientId = this.$store.getters.merchantInfo.id
			this.loadData()
		}
	},
	methods: {
		changeSelect(val) {
			this.dialogForm.targetUrl = ''
			this.$refs['formSub'].clearValidate()
		},
		typelinkTarget(val) {
			const lis = this.linkTargetArr.find((item) => item.code === val)
			return lis?.description || '-'
		},
		loadData() {
			this.tableData = []
			this.loading = true
			console.log(this.pageSize)
			const params = {
				...this.queryData,
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				configType: 1,
				clientType: 0
			}
			for (const k in params) {
				if (params[k] === '' || params[k] === undefined) {
					delete params[k]
				}
			}
			homeVenueList(params)
				.then((res) => {
					this.loading = false
					if (res?.code === 200) {
						const { record, totalRecord } = res.data || {}
						this.tableData = Array.isArray(record)
							? Object.freeze(record)
							: []
						this.total = totalRecord || 0
					} else {
						this.$message({
							message: res?.msg,
							type: 'error'
						})
					}
				})
				.catch(() => {
					this.loading = false
				})

			setTimeout(() => {
				this.loading = false
			}, 1000)
		},
		reset() {
			this.pageNum = 1
			this.$refs.searchForm.resetFields()
			if (!this.$store.getters.isZk) {
				this.queryData.merchantClientId = this.$store.getters.merchantInfo.id
			}
			this.loadData()
		},
		addLabel() {
			this.rowData = null
			this.dialogFormVisible = true
			this.$nextTick(() => {
				this.$refs.formSub.resetFields()
			})
			this.title = this.$t('common.add')
			this.dialogForm = {
				isLink: undefined,
				linkTarget: undefined,
				targetUrl: '',
				pageName: undefined,
				pictureUrl: null,
				remark: undefined,
				configType: 1,
				clientType: 0,
				merchantClientId: !this.$store.getters.isZk
					? this.$store.getters.merchantInfo.id
					: undefined
			}
		},
		edit(val) {
			this.title = this.$t('common.edit')
			this.rowData = val
			for (const k in this.dialogForm) {
				this.dialogForm[k] = val[k]
			}
			this.dialogForm.merchantClientId = val.merchantId
			this.dialogFormVisible = true
			if (this.dialogForm.pictureUrl) {
				this.$nextTick(() => {
					this.$refs.imgUpload.state = 'image'
					this.$refs.imgUpload.fileUrl = val.pictureUrl
				})
			}
		},
		deleteLabel(val) {
			const { id } = val
			this.$confirm(
				`<strong>${this.$t('common.delete_tips')}?</strong>`,
				this.$t('common.success_tip'),
				{
					dangerouslyUseHTMLString: true,
					confirmButtonText: this.$t('common.confirm'),
					cancelButtonText: this.$t('common.cancel'),
					type: 'warning'
				}
			)
				.then(() => {
					const loading = this.$loading({
						lock: true,
						text: 'Loading',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					})
					this.$api
						.clientStartDeleteAPI({ id })
						.then((res) => {
							loading.close()
							if (res?.code === 200) {
								this.$message.success(
									this.$t('common.delete_success')
								)
							} else {
								this.$message({
									type: 'error',
									message: this.$t('common.delete_fail')
								})
							}

							this.loadData()
						})
						.catch(() => {
							loading.close()
						})
					setTimeout(() => {
						loading.close()
					}, 1000)
				})
				.catch(() => {})
		},
		subAddOrEdit() {
			const params = {
				...this.dialogForm,
				configType: 1
			}
			const sub =
				this.title !== this.$t('common.edit')
					? startPageAdd
					: startPageEdit
			if (this.title === this.$t('common.edit')) {
				params.id = this.rowData.id
			}
			this.$refs.formSub.validate((valid) => {
				if (valid) {
					sub(params).then((res) => {
						if (res?.code === 200) {
							const message =
								this.title !== this.$t('common.edit')
									? this.$t('common.add_success')
									: this.$t('common.edit_success')
							this.$message({
								message,
								type: 'success'
							})
						} else {
							this.$message({
								message: res?.msg,
								type: 'error'
							})
						}
					})
					this.dialogFormVisible = false
					setTimeout(() => {
						this.loadData()
					}, 1000)
				}
			})
		},
		checkValue(e) {
			// const { value } = e.target
		},
		_changeTableSort({ column, prop, order }) {
			if (order) {
				if (prop === 'createdAt') {
					prop = 0
				}
				if (prop === 'updatedAt') {
					prop = 1
				}
				this.queryData.orderKey = prop
				if (order === 'ascending') {
					// 升序
					this.queryData.orderType = 'asc'
				} else if (column.order === 'descending') {
					// 降序
					this.queryData.orderType = 'desc'
				}
			} else {
				this.queryData.orderKey = undefined
				this.queryData.orderType = undefined
			}
			this.loadData()
		},
		clear() {
			this.$refs.formSub.resetFields()
		},
		preViewPicture(val) {
			const { pictureUrl } = val
			this.pictureUrl = pictureUrl
			this.dialogPictureVisible = true
		},
		// 状态修改
		recycle(val) {
			const { id } = val
			const status = val.pageStatus === 0 ? 1 : 0
			this.$confirm(
				`<strong>${this.$t(
					'operation.switch_status_tips3'
				)}</strong></br>
                 <span style='font-size:12px;color:#c1c1c1'>${this.$t(
						'operation.switch_status_tips2'
					)}</span>`,
				this.$t('common.success_tip'),
				{
					dangerouslyUseHTMLString: true,
					confirmButtonText: this.$t('common.confirm'),
					cancelButtonText: this.$t('common.cancel'),
					type: 'warning'
				}
			)
				.then(() => {
					startPageUpdataStatus({
						id,
						status,
						merchantClientCode: val.merchantId
					}).then((res) => {
						if (res?.code === 200) {
							this.$message({
								message: this.$t('common.action_success'),
								type: 'success'
							})
						} else {
							this.$message({
								message: res?.msg,
								type: 'error'
							})
						}
						this.loadData()
					})
				})
				.catch(() => {})
		},
		handleSizeChange(value) {
			console.log(value)
			this.pageNum = 1
			this.pageSize = value
			this.loadData()
		},
		handleCurrentChange(value) {
			this.pageNum = value
			this.loadData()
		},
		handleStartUpload() {
			this.$message.info(this.$t('common.upload_start'))
		},
		handleUploadSucess({ index, file, id }) {
			this.dialogForm.pictureUrl = file.imgUrl
		},
		handleUploadDefeat() {
			this.dialogForm.pictureUrl = ''
			this.$message.error(this.$t('common.upload_fail'))
		},
		handleDeleteUpload() {
			this.dialogForm.pictureUrl = ''
			this.$message.warning(this.$t('common.upload_del'))
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
::v-deep .tagheight .el-tag {
	height: 24px;
	line-height: 24px;
	min-width: 60px;
}
::v-deep .rempadding .el-dialog__body {
	padding: 0;
	padding-bottom: 30px;

	.contentBox,
	form {
		padding: 0 20px;
	}
}
::v-deep .el-input-number__decrease,
::v-deep .el-input-number__increase {
	display: none;
}
::v-deep .el-input-number--medium .el-input__inner {
	padding: 0 15px;
	text-align: left;
}

.decoration {
	text-decoration: underline;
	cursor: pointer;
}
.bodyBox {
	max-height: 400px;
	overflow: auto;
}
p {
	display: flex;
	height: 40px;
	line-height: 40px;
	border-bottom: 1px solid #e8e8e8;
	justify-content: space-around;
	span {
		display: inline-block;
		width: 50%;
		text-align: center;
	}
}
.headerBox {
	color: #000000d8;
	background: #fafafa;
	font-family: 'PingFang SC ', 'PingFang SC', sans-serif;
	font-weight: 650;
	border-top: 1px solid #e8e8e8;
	margin-top: 15px;
}

.remakeBox {
	word-break: break-word;
}
</style>
